<template>
	<view class="page-order-details order-details">
		<view class="order-details-title">
			<DistributionNavBar rgb="#fff" :title="orderStatusStr[getOrderStatusStr]">
				<template slot="left">
					<image class="order-details-title-image" :src="bankIcon" @click="clickBack" />
				</template>
			</DistributionNavBar>
		</view>

		<view
			class="order-details-prompt"
			v-if="
				detailsInfo.probeStatus === 23 ||
				detailsInfo.probeStatus === 0 ||
				(detailsInfo.probeStatus === 10 && (detailsInfo.finalPriceStatus === 1 || detailsInfo.finalPriceStatus === 0))
			"
		>
			<DistributionOrderHeader
				:type="detailsInfo.probeStatus === 23 ? 'pass' : detailsInfo.probeStatus === 0 ? 'grouping' : 'audit'"
				:errorMsg="detailsInfo.probeStatus === 23 ? detailsInfo.approveMessage : ''"
			/>
		</view>

		<view class="order-details-info">
			<AgentShopOrderItem :item="detailsInfo" :isDetail="true" />
			<view
				class="reference-material"
				v-if="seekType === 2 && (detailsInfo.probeStatus == 11 || detailsInfo.probeStatus == 21 || detailsInfo.probeStatus == 23)"
				@click="toMarterial(detailsInfo.productId)"
			>
				<image src="@/static/images/order/img_sc@2x.png" />
			</view>
			<view class="order-details-info-video" v-if="getOrderStatusStr !== 'review'">
				<view class="order-details-info-video-title">
					<view class="order-details-info-video-title-name">探店信息提交</view>
					<view class="order-details-info-video-title-explain" @click="handleHelp">如何获取推广视频链接</view>
				</view>

				<textarea
					class="order-details-info-video-link"
					placeholder-class="order-details-info-video-link-placeholder"
					placeholder="请填写推广视频链接地址"
					maxlength="-1"
					:disabled="getOrderStatusStr === 'finish'"
					v-model="linkUrl"
				/>

				<!-- <view class="order-details-info-video-context">
					<view class="order-details-info-video-context-name">无水印视频</view>
					<view class="order-details-info-video-context-explain">(请上传无其他平台水印的视频500M以内)</view>
				</view>
				<view class="order-details-info-video-add">
					<view class="order-details-info-video-add-item" :key="item.name" v-for="(item, index) in formatVideoList">
						<image class="order-details-info-video-add-icon" @click="videoClick(item)" :src="videoCoverUrl" />

						<view
							@click="updateVideo(item, index)"
							class="order-details-info-video-add-update"
							v-show="item.status === 'error'"
						>
							<image class="order-details-info-video-add-update-icon" src="@/static/images/order/icon_upload_update.png" />
							<view v-if="item.applyStatus === 2" class="order-details-info-video-add-update-text">重新上传</view>
							<view v-else class="order-details-info-video-add-update-text">点击重试</view>
						</view>

						<image
							v-show="item.status === 'success'"
							class="order-details-info-video-add-play"
							src="@/static/images/order/icon_xq_video.png"
							@click.stop="playVideo"
						/>

						<image
							v-show="item.status === 'success' && getOrderStatusStr !== 'finish'"
							class="order-details-info-video-add-delete"
							src="@/static/images/order/icon_video_delete.png"
							@click.stop="deleteSourceVideo('video', index)"
						/>

						<ArCircleProgress
							v-show="item.status === 'upload'"
							class="order-details-info-video-add-loading"
							:percent="item.percent"
						/>
					</view>
					<image
						v-if="!formatVideoList.length"
						@click="videoClick()"
						class="order-details-info-video-add-icon"
						src="/static/images/order/img_xqy_add_video.png"
					/>
				</view>

				<view class="order-details-info-video-format">支持格式 .mp4</view>

				<view class="order-details-info-image">
					<view class="order-details-info-image-item" :key="item.name" v-for="(item, index) in formatImageList">
						<image :src="item.previewUrl" class="order-details-info-image-item-icon" @click.stop="playVideo('image')" />

						<view
							@click="updateImage(item, index)"
							class="order-details-info-video-add-update"
							v-show="item.status === 'error'"
						>
							<image class="order-details-info-video-add-update-icon" src="@/static/images/order/icon_upload_update.png" />
							<view v-if="item.applyStatus === 2" class="order-details-info-video-add-update-text">重新上传</view>
							<view v-else class="order-details-info-video-add-update-text">点击重试</view>
						</view>

						<image
							v-show="item.status === 'success' && getOrderStatusStr !== 'finish'"
							class="order-details-info-video-add-delete"
							src="@/static/images/order/icon_video_delete.png"
							@click.stop="deleteSourceVideo('image', index)"
						/>
						<ArCircleProgress
							v-show="item.status === 'upload'"
							class="order-details-info-video-add-loading"
							:percent="item.percent"
						/>
					</view>

					<image
						v-if="!formatImageList.length"
						@click="imageClick()"
						class="order-details-info-image-icon"
						src="/static/images/order/img_xqy_add_image.png"
					/>
				</view>
				<view class="order-details-info-video-format">封面尺寸：768*248（px）</view> -->
			</view>

			<view class="order-details-info-base">
				<view class="order-details-info-base-item">
					<view class="order-details-info-base-item-name">探店订单编号</view>
					<view class="order-details-info-base-item-context">{{ detailsInfo.seekNo ? detailsInfo.seekNo : '暂无' }}</view>
					<view class="order-details-info-base-item-copy" @click="copyOrderNo(detailsInfo.seekNo)">复制</view>
				</view>
				<view class="order-details-info-base-item">
					<view class="order-details-info-base-item-name">申请时间</view>
					<view class="order-details-info-base-item-context">
						{{ detailsInfo.applyTime || '' }}
					</view>
				</view>
				<view class="order-details-info-base-item">
					<view class="order-details-info-base-item-name">预计发刊时间</view>
					<view class="order-details-info-base-item-context">
						{{ detailsInfo.publishTime ? detailsInfo.publishTime : '暂无' }} {{ detailsInfo.publishTimeScope || '' }}
					</view>
				</view>
				<view class="order-details-info-base-item">
					<view class="order-details-info-base-item-name">推广平台</view>
					<view class="order-details-info-base-item-context">
						{{ detailsInfo.channelTypeStr ? detailsInfo.channelTypeStr : '暂无' }}
					</view>
				</view>
				<view class="order-details-info-base-item">
					<view class="order-details-info-base-item-name">昵称</view>
					<view class="order-details-info-base-item-context">{{ detailsInfo.nickName ? detailsInfo.nickName : '暂无' }}</view>
				</view>
				<view class="order-details-info-base-item">
					<view class="order-details-info-base-item-name">平台号</view>
					<view class="order-details-info-base-item-context">
						{{ detailsInfo.channelAccount ? detailsInfo.channelAccount : '暂无' }}
					</view>
				</view>

				<view class="order-details-info-base-item">
					<view class="order-details-info-base-item-name">带货等级</view>

					<view class="order-details-info-base-item-context">
						<view style="display: flex; align-items: center">
							<image class="order-details-info-base-item-context-lvIcon" :src="iconTips" />
							{{ detailsInfo.cargoLevel ? detailsInfo.cargoLevel : '暂无' }}
						</view>
					</view>
				</view>
				<view class="order-details-info-base-item">
					<view class="order-details-info-base-item-name">带货分数</view>
					<view class="order-details-info-base-item-context">
						{{ detailsInfo.cargoPoints ? detailsInfo.cargoPoints : '暂无' }}
					</view>
				</view>
				<view
					class="order-details-info-base-service"
					v-if="
						detailsInfo.probeStatus !== 10 &&
						getOrderStatusStr !== 'waitAgentShop' &&
						getOrderStatusStr !== 'reviewFails' &&
						detailsInfo.probeStatus !== 0
					"
				>
					<image class="order-details-info-base-service-icon" src="@/static/images/order/icon_details_service.png" />
					<view class="order-details-info-base-service-text" @click.stop="changeCustomerService(true)">联系客服</view>
				</view>
			</view>
		</view>

		<view
			class="order-details-bottom"
			v-if="
				detailsInfo.probeStatus === 10 ||
				detailsInfo.probeStatus === 0 ||
				getOrderStatusStr === 'waitAgentShop' ||
				getOrderStatusStr === 'reviewFails'
			"
		>
			<view class="order-details-bottom-icon" @click.stop="changeCustomerService(true)">
				<image class="order-details-bottom-icon-image" src="@/static/detail/icon_xqy_service@3x.png" />
				<view class="order-details-bottom-icon-name">客服</view>
			</view>

			<template v-if="detailsInfo.probeStatus === 10">
				<button @click="openCancelCommonApplication" class="calcel">取消申请</button>
			</template>
			<template v-else-if="detailsInfo.probeStatus === 0">
				<button @click="openCancelCommonApplication">取消申请</button>
				<button @click="groupSeekInvaitation">邀请拼团</button>
			</template>
			<template v-else>
				<view
					class="order-details-bottom-button"
					@click="commitCanClick && commitSourceVideo()"
					:class="{
						'order-details-bottom-button-no': !commitCanClick
					}"
				>
					提交
				</view>
			</template>
		</view>

		<DistributionKpsImageCutter :width="1536" :height="496" :url="previewUrl" :blob="false" @ok="onOk" @cancel="onCancle" />

		<!-- 客户咨询 -->
		<DistributionService v-model="serviceStatus" @input="changeCustomerService" />

		<DistributionResourcePreview
			v-model="playShow"
			:list="previewList"
			:remote="isTemVideo"
			:index="previewCurrentIndex"
			@changeIndex="changePreviewCurrentIndex"
			:requestOtherParams="{
				preview: false
			}"
		/>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import EncapsulationUpload from '@/plugIn/upload.js';

import AgentShopOrderItem from '@/components/orderCompontent/AgentShopOrderItem';
import DistributionService from '@/components/distributionService';

import DistributionNavBar from '@/components/distributionNavBar/indeHome';
import DistributionOrderHeader from '@/components/distributionOrderHeader';
import ArCircleProgress from '@/components/distributionArCircleProgress';
import DistributionKpsImageCutter from '@/components/distributionKpsImageCutter';
import DistributionResourcePreview from '@/components/distributionResourcePreview';

// 导入API
import { tdSeekApplyDetail, agentShopOrderCommit } from '@/api/order';
const bankIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);
const iconTips = require('@/static/tandian/icon_cargo_lv.png');

const orderStatusStr = Object.freeze({
	waitAgentShop: '待探店',
	review: '审核中',
	reviewFails: '审核未通过',
	grouping: '拼团中',
	finish: '已完成'
});
export default {
	data() {
		return {
			iconTips,
			orderStatusStr,
			orderId: null,
			detailsInfo: {},
			videoIds: '',
			bankIcon,

			linkUrl: '',
			oldLinkUrl: '',
			previewUrl: '',

			playShow: false,
			serviceStatus: false,
			isSubscription: false,

			previewList: [],
			previewCurrentIndex: 0,
			uploadStatusFileList: [],
			isTemVideo: false,
			seekType: 1
		};
	},

	watch: {
		commitCanClick() {
			this.$forceUpdate();
		},

		uploadStatusFileList: {
			deep: true,
			handler() {
				const { formatImageList } = this;

				if (!formatImageList.length) {
					return;
				}

				const [{ isTailor, status, tempFilePath }] = formatImageList || [];

				if (status !== 'wait' || isTailor) {
					return;
				}

				this.previewUrl = tempFilePath;
			}
		}
	},

	computed: {
		formatVideoList() {
			const { uploadStatusFileList } = this;
			const singleObject = uploadStatusFileList.find((item) => item.type === 'video');
			if (!singleObject) {
				return [];
			}

			return singleObject?.list;
		},

		videoCoverUrl() {
			const { formatImageList, formatVideoList } = this;

			return formatImageList[0]?.previewUrl || formatVideoList[0]?.previewUrl;
		},

		formatImageList() {
			let { uploadStatusFileList } = this;
			const singleObject = uploadStatusFileList.find((item) => item.type === 'image');

			if (!singleObject) {
				return [];
			}

			const { EndPoint, originalPath } = this.upload?.ALYOSSConfig || { ALYOSSConfig: {} };
			return (singleObject?.list || []).map((item) => {
				const { isReturn, name, previewUrl, ...otherParams } = item;
				return {
					...otherParams,

					name,
					isReturn,
					previewUrl,
					coverUrl: isReturn ? previewUrl : `${EndPoint}/${originalPath}${name}`
				};
			});
		},

		// 获取订单状态
		getOrderStatusStr() {
			const {
				detailsInfo: { finalPriceStatus, probeStatus }
			} = this;
			console.log(finalPriceStatus, probeStatus, '----');

			if (probeStatus === 11 || probeStatus === 21) {
				return 'waitAgentShop';
			} else if (probeStatus === 23) {
				return 'reviewFails';
			} else if (probeStatus === 0) {
				return 'grouping';
			} else if (probeStatus === 10 && (finalPriceStatus === 1 || finalPriceStatus === 0)) {
				return 'review';
			} else {
				return 'finish';
			}
		},

		//提交数据按钮点击
		commitCanClick() {
			const { linkUrl, oldLinkUrl } = this;

			// const isVideo = formatVideoList[0]?.isReturn;
			// const isImage = formatImageList[0]?.isReturn;

			if (linkUrl === oldLinkUrl) {
				return false;
			}

			if (!linkUrl.length) {
				return false;
			}

			return true;
		}
	},

	onLoad(options = {}) {
		const { orderId, seekType = 1 } = options;

		if (!orderId) {
			this.backToHomepage();
			return;
		}

		this.orderId = orderId;
		this.getTdSeekApplyDetail();
		this.seekType = +seekType;
		this.upload = new EncapsulationUpload({
			that: this,
			statusNumber: {
				maxImage: 1,
				maxVideo: 1
			},
			videoLimit: {
				minSize: 1024,
				maxSize: 524288000
			},
			repeatHintObject: {
				videoLimit: '请上传无其他平台水印的视频500M以内'
			}
		});
	},
	// 进入拼单页面出现邀请拼团弹框

	methods: {
		toMarterial(id = '') {
			if (!id) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '素材数据有误'
				});
				return;
			}
			uni.navigateTo({
				url: `/newMaterialPages/materialClass?id=${id}`
			});
		},
		openCancelCommonApplication() {
			const { orderId } = this;

			uni.redirectTo({
				url: `/productOrderPage/CancelCommonApplication?id=${orderId}`
			});
		},
		// 邀请拼团
		groupSeekInvaitation() {
			const { orderId } = this;

			uni.redirectTo({
				url: `/productOrderPage/groupSeekInvaitation?id=${orderId}`
			});
		},

		onOk({ path }) {
			const { formatImageList, uploadStatusFileList } = this;
			const singleIndex = uploadStatusFileList.findIndex((item) => item.type === 'image');

			this.previewUrl = '';
			this.upload.autoupload = true;

			this.uploadStatusFileList.splice(singleIndex, 1, {
				type: 'image',
				list: (formatImageList || []).map((item) => {
					return {
						...item,

						isTailor: true,
						previewUrl: path,
						tempFilePath: path
					};
				})
			});

			this.updateImage({}, 0);
		},

		onCancle() {
			const { uploadStatusFileList } = this;
			const singleIndex = uploadStatusFileList.findIndex((item) => item.type === 'image');

			this.previewUrl = '';
			this.upload.autoupload = true;
			this.uploadStatusFileList.splice(singleIndex, 1);
		},

		changePreviewCurrentIndex(index) {
			this.previewCurrentIndex = index;
		},

		//原视频图片或者添加视频点击
		videoClick(item = {}, index) {
			if (!item.status) {
				const params = { applyStatus: 1 };
				this.updateVideo(params);
			} else {
				if (item.status !== 'success') {
					return;
				}
				this.playVideo();
			}
		},

		//替换视频
		updateVideo(item, index) {
			const { getOrderStatusStr } = this;
			let statusArr = ['waitAgentShop', 'reviewFails'];
			if (!statusArr.includes(getOrderStatusStr)) {
				return;
			}
			if (item.applyStatus === 1 || item.applyStatus === 2) {
				if (item.status === 'success') {
					const params = {
						type: 'video',
						index: index
					};
					this.upload.deleteSingleFile(params);
				}
				this.upload.openPhotoAlbum('video');
			} else {
				const params = { index: index, ...item };
				this.upload.singleAgainUpload(params);
			}
		},

		//播放视频
		playVideo(type) {
			this.previewList = type === 'image' ? this.formatImageList : this.formatVideoList;

			this.playShow = true;
			this.previewCurrentIndex = 0;
			this.isTemVideo = !!this.previewList[0].id;
		},

		imageClick() {
			const { getOrderStatusStr, formatImageList } = this;
			let statusArr = ['waitAgentShop', 'reviewFails'];

			if (!statusArr.includes(getOrderStatusStr)) {
				return;
			}

			this.upload.autoupload = false;
			this.upload.openPhotoAlbum('image');
		},

		updateImage(params, index) {
			this.upload.singleAgainUpload({
				...params,

				index,
				type: 'image'
			});
		},

		//删除原视频
		deleteSourceVideo(type, index) {
			const params = {
				type,
				index: index
			};

			this.upload.deleteSingleFile(params);
		},

		//提交原视频
		commitSourceVideo() {
			const { detailsInfo, linkUrl, oldLinkUrl } = this;

			uni.showLoading({
				title: '数据提交中',
				mask: true
			});

			// const info = formatVideoList.map((item) => {
			// 	const { name, otherParams = {} } = item;
			// 	const { ETag = '', Server = '', Location = '', statusCode = 0, resourceType = '' } = otherParams;

			// 	return {
			// 		name,
			// 		ETag,
			// 		statusCode,
			// 		resourceType,

			// 		server: Server,

			// 		obsId: otherParams['x-obs-id-2'] || '',
			// 		location: Location,
			// 		obsRequestId: otherParams['x-obs-request-id'] || ''
			// 	};
			// });

			const { id, skuId, seekNo, productId, productName } = detailsInfo;
			const params = {
				id,
				productId,
				type: 3,
				videoIds: linkUrl,
				// coverUrl: formatImageList[0].coverUrl,

				callbacks: {
					skuId,
					seekNo,
					productId,
					imgNumber: 0,
					uploadType: 3,
					videoNumber: 1,
					partnerName: productName
				}
			};

			if (oldLinkUrl !== linkUrl) {
				params.type = 1;
			}

			// if (!formatVideoList[0]?.isReturn) {
			// 	params.type = 2;
			// }

			// if (!formatImageList[0]?.isReturn) {
			// 	params.type = 4;
			// }

			if (oldLinkUrl !== linkUrl) {
				params.type = 3;
			}

			agentShopOrderCommit(params).then((res) => {
				const { code, data } = res;

				if (code === 200 && data === true) {
					uni.showToast({
						mask: true,
						icon: 'none',
						title: '数据保存成功！'
					});
					this.getTdSeekApplyDetail(false);
					uni.setStorageSync('storageRefreshOrderPagekey', true);
					setTimeout(() => {
						uni.switchTab({
							url: `/pages/tabBar/order`
						});
					}, 1500);
				} else {
					uni.showToast({
						mask: true,
						icon: 'none',
						title: '数据保存失败，请重试！'
					});
				}
			});
		},

		//打开客服
		changeCustomerService(status) {
			this.serviceStatus = status;
		},

		//返回上一页
		clickBack() {
			uni.navigateBack();
		},

		//复制订单号
		copyOrderNo(seekNo) {
			// 复制
			uni.setClipboardData({
				data: seekNo,
				success: () => {
					uni.showToast({
						title: '复制成功！',
						icon: 'success',
						duration: 2000
					});
				}
			});
		},

		//跳转推广链接
		handleHelp() {
			const imgUrl = `${defaultImageUrl}image/img_dy_video_lj.png`;

			const url = `/authorizePage/TikTockLinkGuidance?imgUrl=${imgUrl}`;

			uni.navigateTo({
				url
			});
		},

		async getTdSeekApplyDetail(showLoading = true) {
			const params = {
				id: this.orderId
			};
			console.log('this.id', this.orderId);
			if (showLoading) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
			}

			const { code, data } = (await tdSeekApplyDetail(params)) || {};

			if (!data) {
				this.backToHomepage();
				return;
			}

			if (code === 200) {
				this.detailsInfo = data || {};
				const { originalVideo, videoApproveList } = data;
				if (originalVideo.id) {
					const { id, pixel, duration, name, coverUrl, previewUrl } = originalVideo;

					this.uploadStatusFileList = [
						{
							type: 'video',
							list: [
								{
									id,
									name,
									duration,
									isReturn: true,

									type: 'video',
									status: 'success',
									previewUrl: coverUrl,
									tempFilePath: previewUrl,
									height: pixel.split('*')[1]
								}
							]
						},
						{
							type: 'image',
							list: [
								{
									type: 'image',
									isReturn: true,

									status: 'success',
									previewUrl: coverUrl,
									tempFilePath: coverUrl
								}
							]
						}
					];
				}

				if (videoApproveList[0]) {
					this.linkUrl = videoApproveList[0].videoUrl;
					this.oldLinkUrl = videoApproveList[0].videoUrl;
				}
			}
			if (showLoading) {
				uni.hideLoading();
			}
		},

		//获取数据失败返回首页
		backToHomepage() {
			uni.showModal({
				title: '提示',
				showCancel: false,
				content: '数据加载失败，返回首页',
				success: (res) => {
					uni.switchTab({
						url: '/pages/tabBar/Index'
					});
				}
			});
		}
	},

	components: {
		DistributionNavBar,
		AgentShopOrderItem,
		DistributionService,
		DistributionOrderHeader,
		ArCircleProgress,
		DistributionKpsImageCutter,
		DistributionResourcePreview
	}
};
</script>

<style lang="scss">
@import '@/style/common.scss';

.order-details {
	@include Db_iosBottomDistance(140rpx);

	&-title {
		&-image {
			width: 40rpx;
			height: 40rpx;
			display: block;
		}
	}
	&-prompt {
		overflow: hidden;
		margin-bottom: -86rpx;
	}
	&-info {
		padding: 0 20rpx;
		//margin-bottom: 208rpx;
		.reference-material {
			width: 100%;
			height: 136rpx;
			margin-top: 20rpx;
			border-radius: 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
		&-video {
			width: 710rpx;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx 24rpx 36rpx 24rpx;
			margin-top: 20rpx;
			&-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-name {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}
				&-explain {
					font-size: 24rpx;
					font-weight: 400;
					color: #487fff;
					text-decoration: underline;
				}
			}
			&-link {
				width: 662rpx;
				height: 140rpx;
				background: #fcfcfc;
				border-radius: 12rpx;
				border: 2rpx solid #f2f2f2;
				padding: 16rpx;
				margin-top: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
			}
			/deep/ &-link-placeholder {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
			&-context {
				margin-top: 40rpx;
				display: flex;
				align-items: center;

				&-name {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}
				&-explain {
					margin-left: 16rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #666666;
				}
			}
			&-add {
				margin-top: 16rpx;
				height: 140rpx;
				width: 140rpx;

				position: relative;
				&-icon {
					height: 140rpx;
					width: 140rpx;
					border-radius: 9rpx;
				}
				&-update {
					height: 70rpx;
					position: absolute;
					top: 28rpx;
					left: 30rpx;
					text-align: center;
					&-icon {
						width: 28rpx;
						height: 28rpx;
					}
					&-text {
						font-size: 20rpx;
						font-weight: 400;
						color: #ffffff;
						margin-top: 14rpx;
					}
				}
				&-play {
					position: absolute;
					width: 48rpx;
					height: 48rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				&-delete {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					top: -12rpx;
					right: -12rpx;
				}
				&-loading {
					z-index: 200;
					position: absolute;
					width: 48rpx;
					height: 48rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			&-format {
				margin-top: 16rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #999999;
			}
		}
		&-base {
			width: 710rpx;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 12rpx 0 12rpx 0;
			margin-top: 20rpx;
			&-item {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				&-name {
					font-size: 26rpx;
					font-weight: 400;
					color: #666666;
					width: 156rpx;
				}
				&-context {
					margin-left: 40rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #1f1f1f;
					&-lvIcon {
						width: 60rpx;
						height: 24rpx;
						padding-right: 8rpx;
					}
				}
				&-copy {
					margin-left: 24rpx;
					width: 64rpx;
					height: 36rpx;
					border-radius: 12rpx;
					border: 1rpx solid #cccccc;
					text-align: center;
					line-height: 36rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
				}
			}
			&-service {
				padding: 24rpx 0 14rpx 0;
				border-top: 2rpx solid #f8f8f8;
				display: flex;
				align-items: center;
				justify-content: center;
				&-icon {
					width: 40rpx;
					height: 40rpx;
				}
				&-text {
					margin-left: 8rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #1f1f1f;
				}
			}
		}

		&-image {
			margin-top: 24rpx;

			&-icon {
				width: 382rpx;
				height: 140rpx;
			}

			&-item {
				position: relative;
				width: 382rpx;
				height: 140rpx;

				&-icon {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	&-bottom {
		display: flex;
		position: fixed;
		bottom: 0;
		background: #ffffff;
		box-shadow: 0 0 8rpx 0rpx rgba(51, 51, 51, 0.14);
		width: 100%;
		padding: 20rpx 28rpx 88rpx 54rpx;

		@include Db_iosBottomDistance();

		&-icon {
			&-image {
				width: 40rpx;
				height: 40rpx;
			}
			&-name {
				font-size: 20rpx;
				font-weight: 400;
				color: #333333;
			}
		}
		&-button {
			margin-left: 54rpx;
			width: 574rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #5359ff 0%, #8266ff 70%);
			border-radius: 24rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			text-align: center;
			line-height: 80rpx;
		}

		&-button-no {
			opacity: 0.4;
		}

		button {
			margin-left: 54rpx;
			@include Db_commonButton(88rpx, 24rpx);
			background: #eee;
			flex: 1;
			color: #333;
			// background: #eee;

			&:active {
				background: #f2f1f8;
			}
			&:last-child {
				margin-left: 20rpx;
				color: #fff;
				background: linear-gradient(90deg, #5359ff 0%, #8266ff 70%);
			}
		}
	}
}
</style>
